<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="en-us">
	<title>Xtext-Web State Machine Example (Multiple Resources)</title>
	<link rel="stylesheet" type="text/css" href="xtext/@xtext-version-placeholder@/xtext-ace.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="webjars/requirejs/2.3.7/require.min.js"></script>
	<script type="text/javascript">
		var baseUrl = window.location.pathname;
		var fileIndex = baseUrl.indexOf("ace-statemachine-static-multi.html");
		if (fileIndex > 0)
			baseUrl = baseUrl.slice(0, fileIndex)
		require.config({
			baseUrl: baseUrl,
			paths: {
				"jquery": "webjars/jquery/3.6.0/jquery.min",
				"ace/ext/language_tools": "webjars/ace/1.3.3/src/ext-language_tools",
				"xtext/xtext-ace": "xtext/@xtext-version-placeholder@/xtext-ace",
			}
		});
		require(["webjars/ace/1.3.3/src/ace"], function() {
			require(["xtext/xtext-ace"], function(xtext) {
				var editors = xtext.createEditor({
					position: "absolute",
					syntaxDefinition: "xtext/ace-mode-statemachine",
					loadFromServer: false,
					enableFormattingAction: true,
					baseUrl: baseUrl,
				});
				var leftServices = editors[0].xtextServices;
				var rightServices = editors[1].xtextServices;
				leftServices.editorContext.addServerStateListener(function(params) {
					if (!params.forceUpdate)
						rightServices.update({forceUpdate: true});
				});
				rightServices.editorContext.addServerStateListener(function(params) {
					if (!params.forceUpdate)
						leftServices.update({forceUpdate: true});
				});
			});
		});
	</script>
</head>
<body>

<div class="container-left">
	<div class="xtext-editor"
		data-editor-resource-id="multi-resource-static/left-dummy.statemachine"
	><pre>
/*
 * A first State Machine resource.
 */
input signal x
input signal y

state State1
	set z = false
	if x == true goto State2
end</pre></div>
</div>
<div class="container-right">
	<div class="xtext-editor"
		data-editor-resource-id="multi-resource-static/right-dummy.statemachine"
	><pre>
/*
 * A second State Machine resource.
 */
output signal z

state State2
	if x == false and y == true goto State1
end</pre></div>
</div>

</body>
</html>
